<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="500px" height="500px" style="border:1px solid #000000"> </canvas>
	<!--canvas是画布标签!-->

</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext('2d');
	var g = context.createLinearGradient(20,0,170,0);/*颜色填充区域，起始点*/
	g.addColorStop(0,"red");/*第一部分的颜色*/
	g.addColorStop(0.5,"green");/*第二部分的颜色*/
	g.addColorStop(1,"blue");/*第三部分的颜色*/
	context.fillStyle = g;
	context.fillRect(20,20,150,100);
	context.rect(20,20,150,100);
	context.stroke();

	context.font="30px Times New Roman"

	context.fillText("hello world",100,500)
</script>
<!--渐变色横向计算：!-->